<template>
    <div class="box">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
            <van-list class="vantlist" v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
                <van-cell v-for="item,index in list" :key="index">
                    <van-image lazy-load :src="item.scene_pic_url" class="img" />
                    <span class="title">{{ item.title }}</span>
                    <div class="subtitle">{{ item.subtitle }}</div>
                    <div class="price_info">¥{{ item.price_info }}元起</div>
                </van-cell>
            </van-list>
        </van-pull-refresh>
    </div>
</template>

<script>
import { SubjectList } from '../../http/api'
// 引入图片懒加载组件
import Vue from 'vue'
import { Lazyload } from 'vant'

Vue.use(Lazyload)
export default {
  data () {
    return {
      // 控制下拉刷新
      loading: false,
      finished: false,
      refreshing: false,
      // 请求到的数据数组
      list: [],
      // 请求携带参数
      info: {
        page: 1,
        size: 10
      }
    }
  },
  methods: {
    // 发送请求获取数据
    async getSubjectList () {
      const res = await SubjectList(this.info)
      this.list = res.data.data.data
    },
    // 加载
    onLoad () {
      setTimeout(async () => {
        if (this.refreshing) {
          this.list = []
          this.refreshing = false
        }
        for (let i = 0; i < 2; i++) {
          this.info.page = 2
          const res = await SubjectList(this.info)
          this.list.push(...res.data.data.data)
        }
        // 停止加载数据
        this.loading = false
        // 判断是否还有数据
        if (this.list.length >= 20) {
          this.finished = true
        }
      }, 1000)
    },
    // 下拉刷新
    onRefresh () {
      // 清空列表数据
      this.finished = false
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true
      this.onLoad()
    }

  },
  created () {
    this.getSubjectList()
  }
}
</script>

<style scoped>
.img {
    width: 100%;
    height: 200px;
    margin-bottom: 20px;
}

.title {
    font-size: 20px;
    width: 100%;
    height: 420px;
    text-align: center;
}

.van-cell__value--alone {
    text-align: center !important;
}

.subtitle {
    font-size: 16px;
    margin-top: 25px;
    margin-bottom: 20px;
    box-sizing: border-box;
    padding-left: 5px;
    padding-right: 5px;
}

.price_info {
    color: rgb(197, 85, 0);
    font-size: 18px;
    margin-bottom: 15px;
}

.pagination {
    height: 120px;
}

.van-cell {
    padding: 0 !important;
}

.vantlist {
    height: 100%;
    overflow-y: auto;
}
</style>
